<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="src/css/scojs.css" rel="stylesheet">
    <link href="src/css/colpick.css" rel="stylesheet">
    <link href="src/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="src/css/main.css">
    <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css">-->
    <style>
        .Dplayer_danmu {
            width: 300px;
            height: 520px;
        }

        .Dplayer_watching {
            width: 100%;
            height: 60px;
            line-height: 60px;
            display: inline-block;
            font-size: 12px;
            color: #99a2aa;
            box-shadow: #ddd 0 0 5px
        }


        .Dplayer-watching-number {
            margin-left: 20px;
            font-size: 18px;
            font-weight: 700;
            color: #222;
            padding: 0
        }


        .Dplayer_list {
            width: 100%;
            height: 30px;
            overflow: hidden;
            padding: 0px;
        }


        .Dplayer_list li {
            width: 60px;
            height: 30px;
            float: left;
            color: #99a2aa;
            font-size: 12px;
            text-align: center;
            line-height: 30px;
            list-style: none;

        }


        .Dplayer_list li:nth-child(1) {
            width: 60px !important
        }


        .Dplayer_list li:nth-child(2) {
            width: 120px !important
        }

        .Dplayer_list li:nth-child(3) {
            width: 120px !important
        }

        .list_ovefiow {
            width: 100%;
            height: 363px;
            overflow: auto;
            padding: 0px;
        }
    </style>
</head>
<body>
<div style="margin-left: 20%; margin-top: 100px;">
    <div id="danmup" style="float: left;">
    </div>
    <div class="Dplayer_danmu" style="float: left; border: 1px red solid;">
        <div class="Dplayer_watching">
            <span class="Dplayer-watching-number" title="这个数据是假的">24</span>
            人正在观看,<span class="danmuku_num">100</span>条弹幕
        </div>
        <ul class="Dplayer_list">
            <li>时间</li>
            <li>发送内容</li>
        </ul>
        <ul class="list_ovefiow">
            <#list danmups as danmup>
                <li ><div style="width: 60px;height: 30px;margin-left: 20px;display: inline-block">${danmup.time}</div><div style="width: 120px;height: 30px;margin-left: 20px;display: inline-block">${danmup.text}</div></li>
            </#list>
        </ul>
    </div>

    <div style="clear: both;"></div>
    <input type="button" value="${great}" id="btn">&nbsp;&nbsp;&nbsp;<input type="button" id="collect" value="${msg}"/>
    &nbsp;&nbsp;&nbsp;<input type="button" id="coin" value="${coin}"/>
    <div style="display: none" id="d">
        请点击你想投币的个数:
        <input type="button" id="c1" value="1"/>&nbsp;&nbsp;<input type="button" id="c2" value="2"/>
    </div>

    <div style="display: none">
        <span class="glyphicon" aria-hidden="true">&#xe072</span>
        <span class="glyphicon" aria-hidden="true">&#xe073</span>
        <span class="glyphicon" aria-hidden="true">&#xe242</span>
        <span class="glyphicon" aria-hidden="true">&#xe115</span>
        <span class="glyphicon" aria-hidden="true">&#xe111</span>
        <span class="glyphicon" aria-hidden="true">&#xe096</span>
        <span class="glyphicon" aria-hidden="true">&#xe097</span>
    </div>
    <div id="message"></div>
</div>
</body>
<script src="src/js/jquery-2.1.4.min.js"></script>
<script src="src/js/jquery.shCircleLoader.js"></script>
<script src="src/js/sco.tooltip.js"></script>
<script src="src/js/colpick.js"></script>
<script src="src/js/jquery.danmu.js"></script>
<script src="src/js/main.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>
   /*
   DanmuPlayer在页面载入时，会向url_to_get_danmu所对应的页面发送Get请求，
   url_to_get_danmu对应页面的http响应报文的内容中应该是一个由danmu对象组成的js数组（字符串形式）。
   "['{danmmu对象1}','{danmu对象2}',...,'{danmu对象n}']"这样的字符串（遵循JSON格式标准）（在报文中是没有最外面的引号的）(注意：每个danmu对象都要被引号所包裹，否则会产生致命错误)。
  当用户发弹幕时，DanmuPlayer向url_to_post_danmu发送post请求，报文的内容是用户所发弹幕的danmu对象（字符串）（遵循JSON格式标准）。
   如果你需要在get和post的同时向后端发生其他参数，请在URL里以get的形式发送。*/
   /*初始化DanmuPlayer */
   $("#danmup").DanmuPlayer({
        src:"${video.name}",//视频源
        height: "480px", //区域的高度
        width: "800px" ,//区域的宽度
        urlToGetDanmu:"receiveDanmup?id="+${video.id},//用来接收弹幕信息的url
        urlToPostDanmu:"sendDanmup?id="+${video.id},//用来发送弹幕信息的url
    });

    $("#danmup .danmu-div").danmu("addDanmu",[
        { "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
        ,{ "text":"我是帽子绿" ,color:"green",size:1,position:0,time:3}
        ,{ "text":"哈哈哈啊哈" ,color:"black",size:1,position:0,time:10}
        ,{ "text":"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
        ,{ "text":"这是底部弹幕" , color:"red" ,size:1,position:2,time:9}
        ,{ "text":"大家好，我是伊藤橙" ,color:"orange",size:1,position:1,time:3}
    ])


   var websocket = null;
   //判断当前浏览器是否支持WebSocket
   if ('WebSocket' in window) {
       //建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
       websocket = new WebSocket("ws://localhost:8080/webSocket");
   }
   else {
       alert('当前浏览器 Not support websocket')
   }
   //连接发生错误的回调方法
   websocket.onerror = function () {
       setMessageInnerHTML("WebSocket连接发生错误");
   };
   //连接成功建立的回调方法
   websocket.onopen = function () {
       setMessageInnerHTML("WebSocket连接成功");
   }
   //接收到消息的回调方法
   websocket.onmessage = function (event) {
       setMessageInnerHTML(event.data);
       if(event.data!=null){
           alert(event.data)
           var map = eval('('+event.data+')');
           var $str="";
           $str=$str+"<li><div style=\"width: 60px;height: 30px;margin-left: 20px;display: inline-block\">"+map.time+"</div><div style=\"width: 120px;height: 30px;margin-left: 20px;display: inline-block\">"+map.text+"</div></li>"
           $(".list_ovefiow").append($str)
       }
   }
   //连接关闭的回调方法
   websocket.onclose = function () {
       setMessageInnerHTML("WebSocket连接关闭");
   }
   //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
   window.onbeforeunload = function () {
       closeWebSocket();
   }
   //将消息显示在网页上
 /*  function setMessageInnerHTML(innerHTML) {
       document.getElementById('message').innerHTML += innerHTML + '<br/>';
   }*/
   //关闭WebSocket连接
   function closeWebSocket() {
       websocket.close();
   }

   //点赞和取消点赞
    $("#btn").click(function () {
        if ($("#btn").val()=="取消点赞") {
            alert("取消点赞方法")
            alert(${video.id})
            $.ajax({
               type:"post",
               data:{"id":${video.id},"uid":"1"},
               url:"delLike",
               success:function (data) {
                  if(data=="true"){
                      alert("已取消")
                      $("#btn").val("点赞")
                  }else{
                      alert("取消点赞失败")
                  }
               }
            })

        }else{
            alert("点赞方法");
            $.ajax({
                type:"post",
                data:{id:${video.id},uid:"1"},
                url:"addLike",
                success:function (data) {
                    if(data=="true"){
                        alert("已点赞")
                        $("#btn").val("取消点赞")
                    }else{
                        alert("点赞失败")
                    }
                }
            })
        }
    })

  //收藏和取消收藏
   $("#collect").click(function () {
       if ($("#collect").val() == "取消收藏") {
           $(function () {
               $.ajax({
                   type: "post",
                   data: {
                       "video":${video.getId()},
                       "uid":1
                   },
                   url: "delCollect",
                   success: function (result) {
                   }
               })
           });
           $("#collect").val("收藏")
       } else {
           $(function () {
               $.ajax({
                   type: "post",
                   data: {
                       "video":${video.getId()},
                       "uid":1
                   },
                   url: "addCollect",
                   success: function (result) {
                   }
               })
           });
           $("#collect").val("取消收藏");
       }
   })


    panduan();

   function panduan() {
      if($("#coin").val()=="已投币"){
          $("#coin").attr("disabled",true);
      }
    }

   $("#coin").click(function () {
       $("#d").css("display","block");
       $("#c1").click(function () {
           $.ajax({
               type:"post",
               data:{id:${video.id},uid:"1",num:$("#c1").val()},
               url:"/addCoin",
               success:function (data) {
                   if(data=="true"){
                       alert("投币成功");
                       $("#d").css("display","none");
                       $("#coin").val("已投币");
                       $("#coin").attr("disabled",true);
                   }else{
                       alert("投币失败");
                   }
               }
           })
       });
       $("#c2").click(function () {
           $.ajax({
               type:"post",
               data:{id:${video.id},uid:"1",num:$("#c2").val()},
               url:"addCoin",
               success:function (data) {
                   if(data=="true"){
                       alert("投币成功");
                       $("#d").css("display","none");
                       $("#coin").val("已投币");
                       $("#coin").attr("disabled",true);
                   }else{
                       alert("投币失败");
                   }
               }
           })
       })
   })

</script>
</html>